<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加小说基本信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css"
          media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>

<div id="app">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加小说基本信息</legend>
    </fieldset>

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="小说书名"  style="width: 50%;">
            <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-select v-model="form.authorId" placeholder="请选择">
                <el-option
                        v-for="item in author"
                        :key="item.authorId"
                        :label="item.authorName"
                        :value="item.authorId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="小说类型">
            <el-select v-model="form.categoryId" placeholder="请选择">
                <el-option
                        v-for="item in category "
                        :key="item.categoryId"
                        :label="item.categoryName"
                        :value="item.categoryId">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="小说状态" >
            <el-radio v-model="form.statu" label="1">连载中</el-radio>
            <el-radio v-model="form.statu" label="0">已完结</el-radio>
        </el-form-item>
        <el-form-item label="小说频道" >
            <el-radio v-model="form.sex" label="1">男频</el-radio>
            <el-radio v-model="form.sex" label="0">女频</el-radio>
        </el-form-item>

        <el-form-item label="小说封面">
            <el-upload
                    class="avatar-uploader"
                    action="novel/upImg/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if=" form.coverImage" :src=" form.coverImage" class="avatar"  >
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>

        <el-form-item label="小说简介"  style="width: 80%;">
            <el-input type="textarea" v-model="form.introduction"  :rows="5"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即添加</el-button>

        </el-form-item>
    </el-form>


</div>




<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<script>

    var v = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    title: '',
                    authorId: '',
                    categoryId: '',
                    statu:  '',
                    sex: '',
                    coverImage: '',
                    introduction: '',
                    publishDate:  new Date(),

                },
                category: [],
                author: [],

            }

        },
        methods: {
            handleAvatarSuccess(res ) {
                console.log('上传成功，服务器返回的数据：', res);
                this.form.coverImage = res;

            },
            beforeAvatarUpload(file) {

                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return   isLt2M;
            },
            onSubmit() {
                if(this.form.title != '' && this.form.authorId != '' && this.form.categoryId != '' && this.form.statu != '' && this.form.sex != '' && this.form.coverImage != '' && this.form.introduction != ''){
                    axios.post('novel/add', this.form).then(res => {

                        if (res.data == 1){

                            alert("添加成功");
                            this.form = {
                                title: '',
                                authorId: '',
                                categoryId: '',
                                statu: '',
                                sex: '',
                                coverImage: '',
                                introduction: '',
                                publishDate:  new Date(),
                            };
                        }

                    });
                }
                else{

                    alert("请完整填写信息");
                }


            },


        },
        mounted() {
            axios.get('author/select').then(res => {
                this.author = res.data;

            });
            axios.get('category/select').then(res => {
                this.category = res.data;

            });



        }

    });


</script>
</body>
</html>
